<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ attribute name="id" type="java.lang.String" required="false" %>
<%@ attribute name="provinceName" type="java.lang.String" required="true"%>
<%@ attribute name="cityName" type="java.lang.String" required="true"%>
<%@ attribute name="districtName" type="java.lang.String" required="true"%>
<%@ attribute name="provinceValue" type="java.lang.String" required="false"%>
<%@ attribute name="cityValue" type="java.lang.String" required="false"%>
<%@ attribute name="districtValue" type="java.lang.String" required="false"%>
<%@ attribute name="style" type="java.lang.String" required="false"%>
<c:set var="ctx" value="${pageContext.request.contextPath}"></c:set>
<jsp:doBody var="pageHTML" />
<%
	String pageHTML = (String)jspContext.getAttribute("pageHTML");
%>
<style type="text/css">
<!--
#${id} select {width:100px;float:left;margin-right:3px;}
#${id} #city_${id} {display:none;}
#${id} #district_${id} {display:none;}
<%=pageHTML%>
-->
</style>
<script type="text/javascript">
$(function(){
	var cache = {};
	$.get("${ctx}/constant/provinces", function(data){
		for(var i = 0; i < data.length; i++) {
			var item = data[i];
			$("#province_${id}").append("<option value='"+item.code+"'>"+item.text+"</option>");
		}
		<c:if test="${provinceValue != null || provinceValue != ''}">
		$("#province_${id}").val("${provinceValue}");
		</c:if>
	});
	$("#province_${id}").change(function(){
		var pId = $(this).val();
		fillCity${id}(pId);
	});
	$("#city_${id}").change(function(){
		var cityId = $(this).val();
		fillDistrict${id}(cityId);
	});
	<c:if test="${provinceValue != null || provinceValue != ''}">
	fillCity${id}("${provinceValue}", "${cityValue}");
	</c:if>
	<c:if test="${cityValue != null || cityValue != ''}">
	fillDistrict${id}("${cityValue}", "${districtValue}");
	</c:if>
	function fillCity${id}(pId, curId) {
		$("#city_${id}").html("<option value=''>-<%="\u8BF7\u9009\u62E9"%>-</option>");
		$("#district_${id}").html("<option value=''>-<%="\u8BF7\u9009\u62E9"%>-</option>");
		$("#district_${id}").hide();
		if(pId == "") {
			$("#city_${id}").hide();
			return;
		}
		if (cache["city_" + pId] == null) {
			$.get("${ctx}/constant/citys/" + pId, function(data){
				cache["city_" + pId] = data;
				for(var i = 0; i < data.length; i++) {
					var item = data[i];
					if (curId != "" && curId == item.code) {
						$("#city_${id}").append("<option value='"+item.code+"' selected='selected'>"+item.text+"</option>");
					} else {
						$("#city_${id}").append("<option value='"+item.code+"'>"+item.text+"</option>");
					}
				}
			});
		} else {
			var data = cache["city_" + pId];
			for(var i = 0; i < data.length; i++) {
				var item = data[i];
				if (curId != "" && curId == item.code) {
					$("#city_${id}").append("<option value='"+item.code+"' selected='selected'>"+item.text+"</option>");
				} else {
					$("#city_${id}").append("<option value='"+item.code+"'>"+item.text+"</option>");
				}
			}
		}
		$("#city_${id}").show();
	}
	function fillDistrict${id}(cityId, curId) {
		$("#district_${id}").html("<option value=''>-<%="\u8BF7\u9009\u62E9"%>-</option>");
		if(cityId == "") {
			$("#district_${id}").hide();
			return;
		}
		if (cache["district_" + cityId] == null) {
			$.get("${ctx}/constant/districts/" + cityId, function(data){
				cache["district_" + cityId] = data;
				for(var i = 0; i < data.length; i++) {
					var item = data[i];
					if (curId != "" && curId == item.code) {
						$("#district_${id}").append("<option value='"+item.code+"' selected='selected'>"+item.text+"</option>");
					} else {
						$("#district_${id}").append("<option value='"+item.code+"'>"+item.text+"</option>");
					}
				}
			});
		} else {
			var data = cache["district_" + cityId];
			for(var i = 0; i < data.length; i++) {
				var item = data[i];
				if (curId != "" && curId == item.code) {
					$("#district_${id}").append("<option value='"+item.code+"' selected='selected'>"+item.text+"</option>");
				} else {
					$("#district_${id}").append("<option value='"+item.code+"'>"+item.text+"</option>");
				}
			}
		}
		$("#district_${id}").show();
	}
});
</script>
<div id="${id}">
	<select id="province_${id}" name="${provinceName}"><option value="">-<%="\u8BF7\u9009\u62E9"%>-</option></select>
	<select id="city_${id}" name="${cityName}"><option value="">-<%="\u8BF7\u9009\u62E9"%>-</option></select>
	<select id="district_${id}" name="${districtName}"><option value="">-<%="\u8BF7\u9009\u62E9"%>-</option></select>
</div>
